<!doctype html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <title>XPay个人收款支付系统</title>
    <meta name="description" content="XPay个人收款支付系统 无需签约 无需第三方SDK 完全免费">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="favicon.ico">

    <link rel="stylesheet" href="assets/css/swiper.min.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link rel="stylesheet" href="assets/css/iconfont.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/bootsnav2.css">

    <!--For Plugins external css-->
    <!--<link rel="stylesheet" href="assets/css/plugins.css" />-->
    <!--Theme custom css -->
    <link rel="stylesheet" href="assets/css/style.css">

    <!--Theme Responsive css-->
    <link rel="stylesheet" href="assets/css/responsive.css"/>

    <link rel="stylesheet" href="assets/css/alipay.css">

    <script src="assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>

    <!-- Hotjar Tracking Code for http://xpay.exrick.cn/ -->
    <script>
        (function (h, o, t, j, a, r) {
            h.hj = h.hj || function () {
                (h.hj.q = h.hj.q || []).push(arguments)
            };
            h._hjSettings = {hjid: 734009, hjsv: 6};
            a = o.getElementsByTagName('head')[0];
            r = o.createElement('script');
            r.async = 1;
            r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
            a.appendChild(r);
        })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
    </script>
</head>

<body data-spy="scroll" data-target=".navbar-collapse" style="background:#f1f2f7">

<div class="culmn">
    <!--Home page style-->

    <nav class="navbar navbar-default bootsnav navbar-fixed white no-background"
         style="border-bottom: solid 1px #e0e0e0;background-color: #fff;">
        <div class="container">

            <!-- Start Atribute Navigation -->
            <div class="attr-nav">
                <ul>
                    <li><a href="https://github.com/Exrick/xpay" target="_blank" title="Github"><i class="fa fa-github"
                                                                                           style="font-size:21px"></i></a>
                    </li>
                    <li><a href="http://blog.exrick.cn" target="_blank" title="作者博客"><i class="fa fa-user-circle"
                                                                                        style="font-size:18px"></i></a>
                    </li>
                    <li><a><i class="fa fa-qrcode" style="font-size:19px" title="Star或捐赠后可加入Q群" data-container="body"
                              data-toggle="popover" data-placement="bottom"
                              data-html="true" data-content="<img src='assets/images/qq-qr.png' width='150'>"
                              data-trigger="hover"></i></a></li>
                </ul>
            </div>
            <!-- End Atribute Navigation -->


            <!-- Start Header Navigation -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                    <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="index">
                    <img src="assets/images/footer-logo.png" class="logo logo-display" alt="">
                    <img src="assets/images/footer-logo.png" class="logo logo-scrolled" alt="">
                </a>

            </div>
            <!-- End Header Navigation -->

            <!-- navbar menu -->
            <div class="collapse navbar-collapse" id="navbar-menu">
                <ul class="nav navbar-nav navbar-center">
                    <li><a href="index">首页</a></li>
                    <li><a href="pay">支付体验</a></li>
                    <li><a href="thanks">捐赠名单</a></li>
                    <li><a href="http://xmall.exrick.cn" target="_blank">XMall商城</a></li>
                    <li><a href="https://github.com/Exrick/xpay" target="_blank">开发教程</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div>
    </nav>

    <!--Featured Section-->
    <section id="features" class="features">
        <div class="container">
            <div class="row">
                <div class="main_features p-top-100">

                    <div class="gray-box">
                        <div class="title">
                            <h2>XPay收银台 收款方：Exrick</h2>
                        </div>
                        <!--内容-->
                        <div>
                            <div class="box-inner order-info">
                                <p class="payment-detail">扫一扫付款（元）</p>
                                <p class="payment-money" id="money1"></p>
                                <div class="img-box" style="flex-direction: column">
                                    <img class="pic" id="qr-pic"
                                         src="/assets/qr/alipay/custom.png"
                                         alt="加载失败" width="168px" height="168px"/>
                                    <div class="explain">
                                        <img class="fn-left"
                                             src="https://t.alipayobjects.com/images/T1bdtfXfdiXXXXXXXX.png"
                                             alt="扫一扫标识">
                                        <div class="fn-right">打开手机支付宝<br>扫一扫继续付款</div>
                                    </div>
                                    <div class="timeout" style="display: none">二维码已过期</div>
                                </div>
                                <a class="download-alipay" href="https://mobile.alipay.com/index.htm" target="_blank">首次使用请下载手机支付宝</a>
                                <div class="count" id="time-box"></div>

                                <div class="qrguide-area">
                                    <img id="img1"
                                         src="https://t.alipayobjects.com/images/rmsweb/T13CpgXf8mXXXXXXXX.png"
                                         class="show" onclick="change()">
                                    <img id="img2"
                                         src="https://t.alipayobjects.com/images/rmsweb/T1ASFgXdtnXXXXXXXX.png"
                                         class="hide" onclick="change()">
                                </div>

                                <img src="assets/images/red.png" width="50px" height="50px" class="red" title="支付领红包"
                                     onclick="showRed()">
                            </div>
                        </div>

                        <div>
                            <div class="box-inner">
                                <div>
                                        <span>
              
                                        </span>
                                    <em><span>¥</span><em id="money2"></em></em>
                                    <input type="text" class="disabled-btn" onclick="confirm()" id="confirm"
                                           value="等待支付..." readonly>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div><!-- End off row -->
        </div><!-- End off container -->
    </section><!-- End off Featured Section-->

    <!-- scroll up-->
    <div class="scrollup">
        <a href="#"><i class="fa fa-chevron-up"></i></a>
    </div><!-- End off scroll up -->


    <footer id="footer" class="footer bg-black">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <nav class="navbar navbar-default bootsnav footer-menu no-background">
                        <div class="container">

                            <!-- Start Atribute Navigation -->
                            <div class="attr-nav">
                                <ul>
                                    <li>
                                        <a href="https://github.com/Exrick/xpay" target="_blank" title="Github">
                                            <i class="fa fa-github" style="font-size:21px"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="http://blog.exrick.cn" target="_blank" title="作者博客">
                                            <i class="fa fa-user-circle" style="font-size:18px"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            <i class="fa fa-qrcode" style="font-size:19px" title="Star或捐赠后可加入Q群"
                                               data-container="body" data-toggle="popover" data-placement="top"
                                               data-html="true"
                                               data-content="<img src='assets/images/qq-qr.png' width='150'>"
                                               data-trigger="hover"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <!-- End Atribute Navigation -->


                            <!-- Start Header Navigation -->
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse"
                                        data-target="#navbar-footer">
                                    <i class="fa fa-bars"></i>
                                </button>
                                <a class="navbar-brand" href="index"><img src="assets/images/footer-logo.png"
                                                                          class="logo" alt=""></a>
                            </div>
                            <!-- End Header Navigation -->

                            <!-- navbar menu -->
                            <div class="collapse navbar-collapse" id="navbar-footer">
                                <ul class="nav navbar-nav navbar-center">
                                    <li><a href="index">首页</a></li>
                                    <li><a href="pay">支付体验</a></li>
                                    <li><a href="thanks">捐赠名单</a></li>
                                    <li><a href="http://xmall.exrick.cn" target="_blank">XMall商城</a></li>
                                    <li><a href="https://github.com/Exrick/xpay" target="_blank">开发教程</a></li>
                                </ul>
                            </div><!-- /.navbar-collapse -->
                        </div>
                    </nav>
                </div>
                <div class="divider"></div>
                <div class="col-md-12">
                    <div class="main_footer text-center p-top-40 p-bottom-30">
                        <p class="wow fadeInRight" data-wow-duration="1s">
                            <a href="http://blog.exrick.cn/" target="_blank">xpay.exrick.cn </a> ©2017. All Rights
                            Reserved
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="title">支付红包</h4>
                </div>
                <div class="modal-body" id="body">
                    <img src="http://oweupqzdv.bkt.clouddn.com/1512881761970_small.jpg" class="qr-red"/>
                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-warning" type="button">领取了</button>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- JS includes -->

<script src="assets/js/vendor/jquery-1.11.2.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>

<script src="assets/js/jquery.magnific-popup.js"></script>
<script src="assets/js/jquery.easing.1.3.js"></script>
<script src="assets/js/swiper.min.js"></script>
<script src="assets/js/jquery.collapse.js"></script>
<script src="assets/js/bootsnav.js"></script>

<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/jquery.cookie.js"></script>

</body>
<script>
    $("[data-toggle='popover']").popover();
    var money = $.cookie('money');
    if (money == "" || money == null) {
        window.location.href = "/";
    }
    $("#money1").html(money);
    $("#money2").html(money);

    var picName = $.cookie('picName');
    var path="";
    if(picName==""||picName==null||picName=="null"||picName=="custom"){

    }else{
        path="/assets/qr/alipay/"+picName+".png";
        $("#qr-pic").attr("src",path);
    }

    showRed();

    function showRed() {
        $("#myModal").modal('show');
    }

    $('#myModal').on('hide.bs.modal', function () {
        countDown();
        countTime();
    })

    var flag = true;

    function change() {
        if (flag) {
            $("#img1").removeAttr("class");
            $("#img1").attr("class", "hide");
            $("#img2").removeAttr("class");
            $("#img2").attr("class", "show");
            flag = !flag;
        } else {
            $("#img1").removeAttr("class");
            $("#img1").attr("class", "show");
            $("#img2").removeAttr("class");
            $("#img2").attr("class", "hide");
            flag = !flag;
        }

    }

    var count = 25;
    $("#confirm").attr("disabled","disabled");
    function countDown() {
        if (count == 0) {
            $("#confirm").removeAttr("class");
            $("#confirm").removeAttr("disabled");
            $("#confirm").attr("class", "main-btn");
            $("#confirm").val("确认已支付");
            return;
        } else {
            count--;
        }
        setTimeout(function () {
            countDown();
        }, 1000);
    }

    function countTime() {
        var time = $.cookie('time');
        if (time <= 0) {
            document.getElementsByClassName("timeout")[0].style.display="block";
            $("#time-box").css("display","none");
            $("#confirm").attr("disabled","disabled");
            $("#confirm").removeAttr("class");
            $("#confirm").attr("class", "disabled-btn");
            $("#confirm").val("二维码已失效");
            count=10000;
            return;
        } else {
            time--;
            showTime(time);
            $.cookie('time', time);
        }
        setTimeout(function () {
            countTime();
        }, 1000)
    }
    
    function showTime(v) {
        if(v==null||v==""){
            return "";
        }
        var m=0,s=0;
        if(v>=60){
            m=Math.floor(v/60);
            s=v%60;
        }else{
            s=v;
        }

        if (m >= 0 && m <= 9) {
            m = "0" + m;
        }
        if (s >= 0 && s <= 9) {
            s = "0" + s;
        }
        $("#time-box").html("请于 "+ m + " 分 " + s + " 秒 内支付");
    }

    function confirm() {
        window.location.href = "/confirm";
    }
</script>
</html>
